<template>
	<view class="profile">
		<!-- 顶部背景 -->
		<view class='UCenter-bg'>
			<!-- 流星 -->
			<view class='space'>
				<view class="stars ">
					<view class="star "></view>
					<view class="star pink "></view>
					<view class="star blue "></view>
					<view class="star yellow "></view>
				</view>
			</view>
			<!-- 头像昵称 -->
			<block>
				<view class='text-center'>
					<view class="cu-avatar2" style="overflow: hidden;">
						<open-data type="userAvatarUrl"></open-data>
					</view>
					<view class="nickName">
						你好，<open-data type="userNickName"></open-data>
					</view>
				</view>
			</block>
			<!-- 波浪 -->
			<image src='/static/images/wave.gif' mode='scaleToFill' class='gif-wave'></image>
		</view>
		<!-- 数据统计 -->
		<view class='padding flex text-center text-grey bg-white shadow-warp-my'>
			<view class='flex flex-sub flex-direction solid-right'>
				<view class="text-xxl text-orange">7.5k+</view>
				<view class="margin-top-sm">
					<text class='cuIcon-hot'></text> 访客
				</view>
			</view>
			<view class='flex flex-sub flex-direction solid-right'>
				<view class="text-xxl text-blue">963</view>
				<view class="margin-top-sm">
					<text class='cuIcon-share'></text> 分享
				</view>
			</view>
			<view class='flex flex-sub flex-direction'>
				<view class="text-xxl text-red">1.1k+</view>
				<view class="margin-top-sm">
					<text class='cuIcon-like'></text> 点赞
				</view>
			</view>
		</view>
		<!-- 操作部分 -->
		<view class="cell-group">
			<view class="cell-wraper">
				<u-cell-group>
					<u-cell-item icon="setting-fill" title="个人设置" :arrow="false" :icon-style="{color: '#2796f2'}"></u-cell-item>
					<u-cell-item icon="integral-fill" title="会员等级" :arrow="false" :icon-style="{color: '#2796f2'}"></u-cell-item>
					<u-cell-item icon="setting-fill" title="个人设置" :arrow="false" :icon-style="{color: '#2796f2'}"></u-cell-item>
					<u-cell-item icon="integral-fill" title="会员等级" :arrow="false" :icon-style="{color: '#2796f2'}"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<!-- 退出登录 -->
		<view class="logoutBtn">
			<u-button :ripple="true" shape="circle" type="error">退出登录</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.profile {

		// 顶部背景
		.UCenter-bg {
			background: #fff;
			background-image: url(../../static/images/zjx_me_bg6.jpg);
			background-size: 100% 100%;
			height: 550rpx;
			display: flex;
			justify-content: center;
			padding-top: 40rpx;
			overflow: hidden;
			position: relative;
			flex-direction: column;
			align-items: center;
			color: #fff;
			font-weight: 300;
			text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

			text {
				opacity: 0.8;
			}

			image {
				width: 200rpx;
				height: 200rpx;
			}

			.gif-wave {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
				z-index: 99;
				mix-blend-mode: screen;
				height: 100rpx;
			}

			// 头像昵称
			.text-center {
				text-align: center;

				.cu-avatar2 {
					font-variant: small-caps;
					margin: 0;
					padding: 0;
					display: inline-flex;
					text-align: center;
					justify-content: center;
					align-items: center;
					background: #ccc;
					color: #fff;
					white-space: nowrap;
					position: relative;
					width: 150rpx;
					height: 150rpx;
					background-size: cover;
					background-position: center;
					vertical-align: middle;
					font-size: 1.5em;
					z-index: 99;
					border-radius: 50%;
				}

				.nickName {
					padding: 30rpx;
					font-size: 36rpx;
					color: #0081ff;
					font-weight: bold;
				}
			}

			// 顶部流星
			.space {
				position: absolute;
				top: 0;
				left: 0;

				.stars {
					.star {
						display: block;
						width: 5rpx;
						height: 5rpx;
						border-radius: 50%;
						background: #FFF;
						top: 100rpx;
						left: 400rpx;
						position: relative;
						transform-origin: 100% 0;
						animation: star-ani 6s infinite ease-out;
						box-shadow: 0 0 5rpx 5rpx rgba(255, 255, 255, .3);
						opacity: 0;
						z-index: 2;

						&:after {
							content: '';
							display: block;
							top: 0rpx;
							left: 4rpx;
							border: 0rpx solid #fff;
							border-width: 0rpx 90rpx 2rpx 90rpx;
							border-color: transparent transparent transparent rgba(255, 255, 255, .3);
							transform: rotate(-45deg) translate3d(1rpx, 3rpx, 0);
							box-shadow: 0 0 1rpx 0 rgba(255, 255, 255, .1);
							transform-origin: 0% 100%;
							animation: shooting-ani 3s infinite ease-out;
						}
					}

					.pink {
						top: 30rpx;
						left: 395rpx;
						background: #ff5a99;
						animation-delay: 5s;
						-webkit-animation-delay: 5s;
						-moz-animation-delay: 5s;

						&:after {
							border-color: transparent transparent transparent #ff5a99;
							animation-delay: 5s;
							-webkit-animation-delay: 5s;
							-moz-animation-delay: 5s;
						}
					}

					.blue {
						top: 35rpx;
						left: 432rpx;
						background: cyan;
						animation-delay: 7s;
						-webkit-animation-delay: 7s;
						-moz-animation-delay: 7s;

						&:after {
							/* border-color: transpareanimation-delay: 12s; */
							-webkit-animation-delay: 7s;
							-moz-animation-delay: 7s;
							animation-delay: 7s;
						}
					}

					.yellow {
						top: 50rpx;
						left: 600rpx;
						background: #ffcd5c;
						animation-delay: 5.8s;

						&:after {
							border-color: transparent transparent transparent #ffcd5c;
							animation-delay: 5.8s;
						}
					}

					@keyframes star-ani {
						0% {
							opacity: 0;
							transform: scale(0) rotate(0) translate3d(0, 0, 0);
							-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
							-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
						}

						50% {
							opacity: 1;
							transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
							-webkit-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
							-moz-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
						}

						100% {
							opacity: 0;
							transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
							-webkit-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
							-moz-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
						}
					}
				}
			}
		}

		// 数字统计
		.shadow-warp-my {
			position: relative;
			box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.1);

			&:before,
			&:after {
				position: absolute;
				content: "";
				top: 20rpx;
				bottom: 30rpx;
				left: 20rpx;
				width: 50%;
				box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.16);
				transform: rotate(-6deg);
				z-index: -1;
			}

			&:after {
				right: 20rpx;
				left: auto;
				transform: rotate(6deg);
			}
		}
		
		// 操作部分
		.cell-group{
			padding: 30rpx;
			
			.cell-wraper{
				border-radius: 18rpx;
				overflow: hidden;
				box-shadow: 0rpx 0rpx 90rpx 0rpx rgba(0, 0, 0, 0.1);
			}
		}
	
		.logoutBtn{
			padding: 30rpx;
		}
	}
</style>
